<template>
  	<div class="login">
		<div class="">
			<h2>用户登录</h2>
      		<section>
				<a-row type="flex" justify="center">
      				<a-col :xs="22" :sm="12" :md="10" :lg="7" :xl="7" class="account">
      				  	<h3>登录账户</h3>
        	      		<a-form-model 
						  ref="ruleForm"
						  :model="form"
						  :rules="rules"
						>
							<a-form-model-item prop="phone">
								<a-input type="text" placeholder="输入手机号或邮箱" v-model="form.phone"/>
							</a-form-model-item>
							<a-form-model-item prop="password">
								<a-input type="text" placeholder="密码" v-model="form.password"/>
							</a-form-model-item>
							<router-link to="" class="forgetPassword">
								<span>
									忘记密码
								</span>
							</router-link>
							<button @click="login">
        	        	      	<span>登录</span>
        	        	      	<span class="iconfont icon--_jiantou"></span>
        	        	  	</button>
        	        	  	<button>
        	        	      	<span>微信快捷登录</span>
        	        	      	<span class="iconfont icon--_jiantou"></span>
        	        	  	</button>
        	      		</a-form-model>
      				</a-col>
      				<a-col :xs="22" :sm="12" :md="10" :lg="7" :xl="7" class="create">
      				  	<h3>创建账户</h3>
						<div>
							<p>注册浪琴表账号，为您带来精美时计与超凡用户体验</p>
							<span>-> 更便捷的购物体验</span>
							<br/>
							<span>-> 更便捷查询订单信息</span>
						</div>
						<router-link to="./register">
							<button>
								<span>立即注册</span>
        	        		    <span class="iconfont icon--_jiantou"></span>
							</button>
						</router-link>
      				</a-col>
    			</a-row>
      		</section>
		</div>
  	</div>
</template>

<script>
import {mapMutations, mapState, mapGetters, mapActions} from 'vuex'
import {loginRequest} from '../assets/js/request.js'
export default {
	data() {
		return {
			// 表单的数据
			form:{
				phone: "",
				password: ""
			},
			// 表单的验证规则
			rules:{
				phone:[
					{required: true, message: '电话为必填项', trigger: 'blur'},
					{
						pattern: /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[01356789]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|6[567]\d{2}|4[579]\d{2})\d{6}$/,
						message: "电话格式错误",
						trigger: 'blur'
					}
				],
				password:[
					{required: true, message: '密码为必填项', trigger: 'blur'},
					{
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
						message: "密码至少包含：数字和英文字母，长度6-20",
						trigger: 'blur'
					}
				]
			},
		}
	},
	methods: {
		...mapActions('cart', ['getCartArr']),
		login(e) {
			e.preventDefault();
			this.$refs.ruleForm.validate(valid => {
      		  	if (valid) {
					// console.log(this.$route.query.redirect)
      		  	  	loginRequest(this.form)
					.then((data) => {
						// localStorage.setItem('user', JSON.stringify(data));
						let date = new Date().getTime() + 120000
						// console.log(this.$Cookie)
						this.$Cookie.set('user', JSON.stringify(data), { expires: 1 });
						// localStorage.setItem("token", data.token);
						this.$Cookie.set("token", data.token, { expires: 1 });
						// console.log(data)
						// 请求购物车
						this.getCartArr()
						// console.log(this.$route)
						if(this.$route.query.redirect) {
							this.$router.push(this.$route.query.redirect);
						} else {
							this.$router.push(`/details/${this.$route.query.id}`);
						}
					})
      		  	} else {
      		  	  	console.log('error submit!!');
      		  	  	return false;
      		  	}
      		});
		}
	},
}
</script>

<style lang="scss" scoped>
	.login {
		background-color: #f0f1f3;
		padding: 90px 0;
		width: 100%;
		&>div {
			width: 95%;
			margin: 0 auto;
			h2 {
				color: #003570;
				font-size: 40px;
				margin-bottom: 50px;
			}
			// 登录内容
			section {
				// 账户
				.account {
					text-align: left;
					padding: 0 35px 0 40px;
					border-right: 1px solid rgb(199, 199, 199);
					margin-top: 30px;
					h3 {
						color: #003570;
						font-size: 17px;
						margin-bottom: 47px;
					}
					// 登录用户信息
					form {
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						input {
							height: 70px;
							padding: 8px 20px 8px 30px;
							margin-bottom: 5px;
							border-style: none;
							border: 1px solid rgb(199, 199, 199);
						}
						.ant-input {
							border-radius:0px;
						}
						// 忘记密码
						.forgetPassword {
							color: #003570;
							margin-bottom: 10px;
							text-align: right;
							span {
								display: inline-block;
								border-bottom: 1px solid #003570;
							}
						}
						// 登录按钮
						button {
							width: 100%;
							text-align: left;
							height: 70px;
							color: white;
							background: #003570;
							padding: 5px 10px 5px 30px;
							margin: 8px 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
							span:last-child {
								font-size: 24px;
							}
							&:hover {
								color: #003570;
								background-color: white;
								border: 1px solid #003570;
							}
						}
						
					}
				}
				// 创建账户
				.create {
					padding: 0 0 0 40px;
					text-align: left;
					margin-top: 30px;
					h3 {
						color: #003570;
						font-size: 17px;
						margin-bottom: 47px;
					}
					div {
						padding:10px 0 40px;
						p {
							margin-bottom: 30px;
						}
						span {
							display: inline-block;
							line-height: 30px
						}
					}
					a {
						// 注册按钮
						button {
							width: 100%;
							text-align: left;
							height: 70px;
							color: white;
							background: #003570;
							padding: 5px 10px 5px 30px;
							margin: 8px 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
							span:last-child {
								font-size: 24px;
							}
							&:hover {
								color: #003570;
								background-color: white;
								border: 1px solid #003570;
							}
						}
					}
				}
			}
		}
	}
</style>